<template>
  <div class="business-view">
    <el-card>
      <div slot="header">
        <span>业务管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="showAddDialog">
          <i class="el-icon-plus"></i> 新增业务记录
        </el-button>
      </div>

      <!-- 查询区域 -->
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="业务号">
          <el-input v-model="queryForm.bizId" placeholder="请输入业务号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据展示 -->
      <div v-if="currentBusiness">
        <el-descriptions title="业务信息" :column="2" border>
          <el-descriptions-item label="业务号">{{ currentBusiness.biz_id }}</el-descriptions-item>
          <el-descriptions-item label="订单号">{{ currentBusiness.order_id }}</el-descriptions-item>
          <el-descriptions-item label="提单号">{{ currentBusiness.bill_id }}</el-descriptions-item>
          <el-descriptions-item label="仓储费">{{ currentBusiness.fee }}</el-descriptions-item>
          <el-descriptions-item label="剩余吨量">{{ currentBusiness.storage_ton }}</el-descriptions-item>
        </el-descriptions>

        <div style="margin-top: 20px;">
          <el-button type="primary" @click="showEditDialog">编辑</el-button>
          <el-button type="danger" @click="handleDelete">删除</el-button>
        </div>
      </div>

      <div v-else-if="!hasQueried" class="empty-state">
        <i class="el-icon-search"></i>
        <p>请输入业务号进行查询</p>
      </div>

      <div v-else class="empty-state">
        <i class="el-icon-warning"></i>
        <p>未找到相关业务信息</p>
      </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="businessForm" :rules="rules" ref="businessForm" label-width="100px">
        <el-form-item label="业务号" prop="biz_id">
          <el-input v-model="businessForm.biz_id" :disabled="isEdit"></el-input>
        </el-form-item>
        <el-form-item label="订单号" prop="order_id">
          <el-input v-model="businessForm.order_id"></el-input>
        </el-form-item>
        <el-form-item label="提单号" prop="bill_id">
          <el-input v-model="businessForm.bill_id"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { businessAPI } from '@/api/api'

export default {
  name: 'BusinessView',
  data() {
    return {
      queryForm: {
        bizId: ''
      },
      currentBusiness: null,
      hasQueried: false,
      dialogVisible: false,
      isEdit: false,
      businessForm: {
        biz_id: '',
        user_id: null,
        order_id: '',
        bill_id: '',
        fee: null,
        storage_ton: null
      },
      rules: {
        biz_id: [
          { required: true, message: '请输入业务号', trigger: 'blur' }
        ],
        order_id: [
          { required: true, message: '请输入订单号', trigger: 'blur' }
        ],
        bill_id: [
          { required: true, message: '请输入提单号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.isEdit ? '编辑业务记录' : '新增业务记录'
    }
  },
  methods: {
    async handleQuery() {
      if (!this.queryForm.bizId) {
        this.$message.warning('请输入业务号')
        return
      }

      try {
        const response = await businessAPI.select(this.queryForm.bizId)
        if (response && response.code === 200 && response.data) {
          this.currentBusiness = response.data
          this.hasQueried = true
          this.$message.success('查询成功')
        } else {
          this.currentBusiness = null
          this.hasQueried = true
          this.$message.warning('未找到相关业务信息')
        }
      } catch (error) {
        console.error('查询失败:', error)
        this.currentBusiness = null
        this.hasQueried = true
        this.$message.error('查询失败')
      }
    },

    resetQuery() {
      this.queryForm.bizId = ''
      this.currentBusiness = null
      this.hasQueried = false
    },

    showAddDialog() {
      this.isEdit = false
      let user = localStorage.getItem('user')
      let user_id = ''
      if (user) {
        try {
          user_id = JSON.parse(user).user_id
        } catch (e) {}
      }
      this.businessForm = {
        biz_id: '',
        user_id: user_id,
        order_id: '',
        bill_id: '',
        fee: null,
        storage_ton: null
      }
      this.dialogVisible = true
    },

    showEditDialog() {
      this.isEdit = true
      this.businessForm = { ...this.currentBusiness }
      this.dialogVisible = true
    },

    async handleSubmit() {
      this.$refs.businessForm.validate(async (valid) => {
        if (valid) {
          try {
            if (this.isEdit) {
              const response = await businessAPI.update(this.businessForm)
              if(response && response.code === 200){
                this.$message.success('更新成功')
              } else {
                this.$message.error('更新失败')
                return
              }
            } else {
              const response = await businessAPI.add(this.businessForm)
              if(response && response.code === 200){
                this.$message.success('添加成功')
                this.currentBusiness = response.data
                this.hasQueried = true
              } else {
                this.$message.error('添加失败')
                return
              }
            }
            this.dialogVisible = false
          } catch (error) {
            console.error('操作失败:', error)
            this.$message.error(this.isEdit ? '更新失败' : '添加失败')
          }
        }
      })
    },

    async handleDelete() {
      this.$confirm('确认删除该业务信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const response = await businessAPI.delete(this.currentBusiness.biz_id)
          if(response && response.code === 200){
            this.$message.success('删除成功')
            this.resetQuery()
          } else {
            this.$message.error('删除失败')
          }
        } catch (error) {
          console.error('删除失败:', error)
          this.$message.error('删除失败')
        }
      })
    }
  }
}
</script>

<style scoped>
.business-view {
  padding: 20px;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #909399;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}
</style>